<template>
  <div>
    <div class="dingbu_xiazhu">
      <div class="display_sw">
        <div class="home_left">
          <span @click="touzhu1" :class="{bottom_border:isbottom}">我要投注</span>
          <span @click="touzhu2" :class="{bottom_border2:isbottom2}">投注记录</span>
        </div>

        <p class="home_you_fz">余额：{{user_info.wallet}}
            <i class="icon_flush" @click="updateWallet"></i>
        </p>
      </div>
    </div>
    <!--这是五星复式的我要投注的内容-->
    <gameInfo :credit="true" @completeCount="completeCount"></gameInfo>
    <div class="longhu_box" v-if="qiehuan1">
      <ul class="longhu_ul">
        <li class="longhu_li">
          <p class="vs_pk">万千 1vs2</p>
          <wanfa name="1vs2" @getActiveData="getActiveData($event,'one_to_two')" ref="one_to_two"></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">万百 1vs3</p>
          <wanfa
            name="1vs3"
            @getActiveData="getActiveData($event,'one_to_three')"
            ref="one_to_three"
          ></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">万十 1vs4</p>
          <wanfa name="1vs4" @getActiveData="getActiveData($event,'one_to_four')" ref="one_to_four"></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">万个 1vs5</p>
          <wanfa name="1vs5" @getActiveData="getActiveData($event,'one_to_five')" ref="one_to_five"></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">千百 2vs3</p>
          <wanfa
            name="2vs3"
            @getActiveData="getActiveData($event,'two_to_three')"
            ref="two_to_three"
          ></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">千十 2vs4</p>
          <wanfa name="2vs4" @getActiveData="getActiveData($event,'two_to_four')" ref="two_to_four"></wanfa>
        </li>

        <li class="longhu_li">
          <p class="vs_pk">千个 2vs5</p>
          <wanfa name="2vs5" @getActiveData="getActiveData($event,'two_to_five')" ref="two_to_five"></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">百十 3vs4</p>
          <wanfa
            name="3vs4"
            @getActiveData="getActiveData($event,'three_to_four')"
            ref="three_to_four"
          ></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">百个 3vs5</p>
          <wanfa
            name="3vs5"
            @getActiveData="getActiveData($event,'three_to_five')"
            ref="three_to_five"
          ></wanfa>
        </li>
        <li class="longhu_li">
          <p class="vs_pk">十个 4vs5</p>
          <wanfa
            name="4vs5"
            @getActiveData="getActiveData($event,'four_to_five')"
            ref="four_to_five"
          ></wanfa>
        </li>
      </ul>
      <creditFooter
        @addCart="addCart"
        @randomConfirm="randomConfirm"
        @handlerSubmitNow="handlerSubmitNow"
        ref="footer"
      />
      <!--下注弹出密码框-->
      <!--<van-dialog
        v-model="isShowPasswordDialog"
        title="温馨提示"
        show-cancel-button
        @cancel="passwordDialogClose"
        @confirm="passwordDialogConfirm"
      >
        <div class="jiaoyi_div">
          <p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
          <input type="password" class="jiaoyi_input" v-model="deal_pwd" placeholder="请输入交易密码" />
        </div>
      </van-dialog>-->

      <van-dialog v-model="isShowPasswordDialog" message="请确定下注" show-cancel-button @cancel="passwordDialogClose" @confirm="passwordDialogConfirm">
				</van-dialog>
    </div>
    <!--下注弹出密码框-->
    <!--这是五星复式的    投注记录组件的内容-->
    <div class="touzhu_zujian" v-else>
       <touzhujilu :isMultiple="true"></touzhujilu>
    </div>
  </div>
</template>

<script>
import touzhujilu from "../wuxingwanfa/components/touzhujilu";
import creditFooter from "../AComp/creditFooter";
import gameInfo from "../AComp/gameInfo";
import wanfa from "./components/wanfa2";
import { creditBattle } from "../../service/api";
import { mapState } from "vuex";
import { randomChip, handlerFilterTextarea } from "../../util/utils";
import _isEmpty from "lodash/isEmpty";
import _random from "lodash/random";
import { Dialog } from "vant";
const keysCollect = [
  "one_to_two",
  "one_to_three",
  "one_to_four",
  "one_to_five",
  "two_to_three",
  "two_to_four",
  "two_to_five",
  "three_to_four",
  "three_to_five",
  "four_to_five",
]
const typeCollect = [
  '1v2','1vs3','1vs4','1vs5','2vs3','2vs4','2vs5','3vs4','3vs5','4vs5'
]
export default {
  components: {
    touzhujilu,
    creditFooter,
    gameInfo,
    wanfa
  },
  data() {
    return {
      isbottom: true, //我要投注添加class
      isbottom2: false, //投注记录添加class
      qiehuan1: true,
      play_type: "19", //投注记录传值五星复式1

      isShowPasswordDialog: false, //密码弹窗
      deal_pwd: "", //交易密码
      goodsList: [],
      amount_money: "",
      one_to_two: [],
      one_to_three: [],
      one_to_four: [],
      one_to_five: [],
      two_to_three: [],
      two_to_four: [],
      two_to_five: [],
      three_to_four: [],
      three_to_five: [],
      four_to_five: []
    };
  },
  computed: {
    ...mapState(["user_info", "current_play_type", "bonus_odd"])
  },

  methods: {
     updateWallet(){
      console.log("更新余额")
      this.$store.dispatch("asyncGetUserInfo");
    },
    getActiveData(result, type) {
      this[type] = result;
    },
    addCart(val) {
      let {
        one_to_two,
        one_to_three,
        one_to_four,
        one_to_five,
        two_to_three,
        two_to_four,
        two_to_five,
        three_to_four,
        three_to_five,
        four_to_five,
        bonus_odd,
        current_play_type
      } = this;
      let arr = [
        one_to_two,
        one_to_three,
        one_to_four,
        one_to_five,
        two_to_three,
        two_to_four,
        two_to_five,
        three_to_four,
        three_to_five,
        four_to_five
      ];
      let temp = [];
      arr.forEach(el => {
        if (!_isEmpty(el)) {
          temp.push(...el);
        }
      });
      if (_isEmpty(temp)) {
        this.$toast("号码选择不完整,请重新选择");
        return;
      }
      console.log(temp,val)
      let money = val;
      let result = [];
      if (!val) {
        money = null;
      }
      let oddsObj = {
        "龙": bonus_odd.dragon,
        "虎": bonus_odd.tiger,
        "和": bonus_odd.flat
      };
      temp.forEach(item => {
        let obj = {
          amount: money,
          name: item.value,
          odds: oddsObj[item.value],
          parentName: item.type,
          playType: current_play_type
        };
        result.push(obj);
      });
      this.$store.commit("set_credit_cart", result);
      this.initData();
      this.$router.push("/credit/xiazhulan");
    },
    completeCount(){
      this.initData();
    },
    // 立即下注
    handlerSubmitNow(val) {
      let {
        one_to_two,
        one_to_three,
        one_to_four,
        one_to_five,
        two_to_three,
        two_to_four,
        two_to_five,
        three_to_four,
        three_to_five,
        four_to_five
      } = this;
      let arr = [
        one_to_two,
        one_to_three,
        one_to_four,
        one_to_five,
        two_to_three,
        two_to_four,
        two_to_five,
        three_to_four,
        three_to_five,
        four_to_five
      ];
      let temp = [];
      arr.forEach(el => {
        if (!_isEmpty(el)) {
          temp.push(...el);
        }
      });
      if (_isEmpty(temp)) {
        this.$toast("号码选择不完整,请重新选择");
        return;
      }
      if (!val) {
        this.$toast("请输入有效金额");
        return;
      }
      this.goodsList = temp;
      this.amount_money = val;
      this.isShowPasswordDialog = true;
    },
    // 提交
    passwordDialogConfirm() {
      let { goodsList, amount_money, bonus_odd, deal_pwd } = this;
      let result = [];
//    if (!deal_pwd) {
//      this.$toast("交易密码不能为空");
//      return;
//    }
      let oddsObj = {
        "龙": bonus_odd.dragon,
        "虎": bonus_odd.tiger,
        "和": bonus_odd.flat
      };
      goodsList.forEach(item => {
        let obj = {
          amount: amount_money,
          name: item.value,
          odds: oddsObj[item.value],
          parentName: item.type
        };
        result.push(obj);
      });
      console.log(result);
      let params = {
        deal_pwd,
        orderlist: JSON.stringify(result)
      };
      creditBattle(params).then(res => {
        this.initData();
        if (res.data.status_code === 200) {
          this.$toast(res.data.message);
          this.$store.dispatch('asyncGetUserInfo');
          this.passwordDialogClose();
        }
      });
    },
    initData() {
      this.$refs.footer.clear();
      keysCollect.forEach(item => {
        this.$refs[item].clear();
      })
    },
    // 密码框关闭
    passwordDialogClose() {
      this.isShowPasswordDialog = false;
      this.deal_pwd = "";
    },

    // 随机下注
    randomConfirm(nums) {
      let { bonus_odd, current_play_type } = this;
      let temp = [];
      let result = [];
       let oddsObj = {
        "龙": bonus_odd.dragon,
        "虎": bonus_odd.tiger,
        "和": bonus_odd.flat
      };
      while (temp.length < nums) {
        temp.push(_random(2));
      }
      let arr = [];
      let keys = ['龙', '虎', '和'];
      temp.forEach(item => {
        arr.push(keys[item])
      })
      arr.forEach(item => {
        let obj = {
          amount: null,
          name: item,
          odds: oddsObj[item],
          parentName: typeCollect[_random(9)],
          playType: current_play_type
        };
        result.push(obj);
      });
      this.$store.commit("set_credit_cart", result);
      this.initData();
      this.$router.push("/credit/xiazhulan");
    },

    //我要投注
    touzhu1() {
      //this.$router.push("/wuxingfushi");
      this.qiehuan1 = true;
      this.isbottom = true;
      this.isbottom2 = false;
    },
    //投注记录
    touzhu2() {
      //this.$router.push("/fushijilu");
      this.qiehuan1 = false;
      this.isbottom2 = true;
      this.isbottom = false;
    }
  }
};
</script>
<style>
@import url("../../assets/css/ttcp/longhu.css");
.display_strad .footer_a {
  background-color: #d37417;
}

.longhu_ul {
  padding-bottom: 1.3rem;
}
.longhu_li .vs_xuanhao .zhenghe_li_qiu{height: 1.52rem;}
</style>
